<template>
  <div class="case_list_box">
    <div class="title">
      <i class="el-icon-s-management"></i>
      <span>用例管理</span>
    </div>
    <div class="caseMenus">
      <el-menu class="el-menu-vertical-demo" @select="updatecaseId">
        <el-submenu :index="t.id+''" v-for="t in tasks" :key="t.id">
          <template slot="title">
            <i class="el-icon-folder-opened"></i>
            <span v-if="t.name.length<10">{{t.name}}</span>
            <span v-else>{{t.name.slice(0,9)+"..."}}</span>
          </template>
          <el-submenu :index="t.id + '_' + sui.id" v-for="sui in t.test_suits" :key="sui.id">
            <template slot="title">
              <i class="el-icon-folder"></i>
              <span v-if="sui.name.length<8">{{sui.name}}</span>
              <span v-else>{{sui.name.slice(0,6)+"..."}}</span>
            </template>
            <el-menu-item v-for="c in sui.testcases" :index="c.id+''" :key="c.id">
              <i class="el-icon-tickets"></i>
              <span v-if="c.title.length<10">{{c.title}}</span>
              <span v-else>{{c.title.slice(0,9)+"..."}}</span>
            </el-menu-item>
            <el-menu-item :index="t.id + '_' + sui.id + '_add'" @click="showAddCaseDlg(sui.id)">
              <i style="color:green" class="el-icon-document-add"></i>
              <span slot="title" style="color:green">添加用例</span>
            </el-menu-item>
          </el-submenu>
          <el-menu-item :index="t.id + '_add'" @click="showAddSuiteDlg(t.id)">
            <i style="color:green" class="el-icon-folder-add"></i>
            <span slot="title" style="color:green">添加套件</span>
          </el-menu-item>
        </el-submenu>
      </el-menu>
    </div>

    <el-dialog :visible.sync="addSuiteDlg">
      <div style="text-align:center" slot="title">
        <span>添加测试套件</span>
      </div>
      <el-form :model="addSuiteForm">
        <el-form-item>
          <el-input v-model="addSuiteForm.name" placeholder="请输入套件名称">
            <template slot="prepend">套件名</template>
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="addSuiteDlg = false">取 消</el-button>
        <el-button type="primary" @click="addSuite">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="addCaseDlg" width="50%">
      <div style="text-align:center" slot="title">
        <span>添加用例</span>
      </div>
      <el-form :model="addCaseForm" label-width="80px">
        <el-form-item label="接口模块">
          <el-select v-model="addCaseForm.interface" placeholder="请选择接口模块">
            <el-option v-for="item in modules" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用例名称">
          <el-input v-model="addCaseForm.title" placeholder="请输入用例名称"></el-input>
        </el-form-item>
        <el-form-item label="测试人员">
          <el-input v-model="addCaseForm.tester" placeholder="请输入测试人员"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="addCaseDlg = false">取 消</el-button>
        <el-button type="primary" @click="createNewCase">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapActions, mapState, mapMutations } from 'vuex'

export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  props: {},
  data() {
    // 这里存放数据
    return {
      addCaseForm: {
        test_suit: '',
      },
      addSuiteForm: {
        name: '',
        taks: '',
      },
      addCaseDlg: false,
      addSuiteDlg: false,
    }
  },
  // 计算属性 类似于data概念
  computed: {
    ...mapState(['tasks', 'interfaces', 'modules']),
  },
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    ...mapMutations(['updatecaseId']),
    ...mapActions(['getTask']),
    showAddCaseDlg(suite_id) {
      this.addCaseForm.test_suit = suite_id
      this.addCaseDlg = true
    },
    async createNewCase() {
      const response = await this.$api.createCases(this.addCaseForm)
      if (response.status === 201) {
        this.$message({
          message: '添加用例成功',
          type: 'success',
          duration: 1000,
        })
        this.getTask()
      } else {
        this.$message({
          message: '添加用例失败',
          type: 'error',
          duration: 3000,
        })
      }
      this.addCaseForm = {}
      this.addCaseDlg = false
    },
    showAddSuiteDlg(id) {
      this.addSuiteForm.task = id
      this.addSuiteDlg = true
    },
    async addSuite() {
      const response = await this.$api.createSuite(this.addSuiteForm)
      if (response.status === 201) {
        this.$message({
          message: '添加套件成功',
          type: 'success',
          duration: 1000,
        })
        this.getTask()
      } else {
        this.$message({
          message: '添加套件失败',
          type: 'error',
          duration: 3000,
        })
      }
      this.addSuiteForm = {}
      this.addSuiteDlg = false
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
}
</script>
<style scoped>
.case_list_box {
  height: calc(100vh - 100px);
  box-shadow: 0 0 5px #272822;
}
.title {
  font: bold 20px/55px 'microsoft yahei';
  text-align: center;
  border-bottom: solid #b1b1b1 5px;
}
.caseMenus {
  height: calc(100vh - 160px);
  overflow-x: hidden;
  overflow-y: auto;
}
</style>
